<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
	<script src="../../resoure/jquery/jquery-1.7.min.js"></script>
	<script type="text/javascript"  charset="utf-8">
	
		
	var bColor=["red","blue","yellow","black","green"];
			
	//页面初始化时候的函数
	$(window).ready(function(){
				
				//页面加载时显示时间
				window.setInterval("showTime()",100);
				
				//input失去焦点事件
				$("#focusoutProblem").focusout(function(){
						var temp = $("#focusoutProblem").val();
						//判断是否是数字
						if(temp.length==0||temp==null){
							alert("不能为空，请填入数字");
							}else{
								if(isNaN(temp)){
									alert("请填入数字");
									}
								}						
					});
					
				//调整图片大小为一半
				var image_Problem=$("#image_Problem");
				//当前图片的大小
				var imageHeight=image_Problem.height();
				var imageWidth=image_Problem.width();
				//鼠标移到图片上时改变图片的大小
				image_Problem.css({"height":(imageHeight*0.5),"width":(imageWidth*0.5)})
							 .on("mouseover",function(){
								 image_Problem.css({"height":imageHeight,"width":imageWidth});
								 })
							 .on("mouseout",function(){
								 image_Problem.css({"height":(imageHeight*0.5),"width":(imageWidth*0.5)});
								 });
				//单击div改变背景颜色
				$("#change_bg").click(function(){
					//得到0到5的随机数
					var flag = Math.floor(Math.random()*5);
					//改变背景颜色
					$("#change_bg").css({"background-color":bColor[flag],"border-color":"black"});
					});
					
				//单击隐藏DIV
				$("#click_hidden").click(function(){
					$("#click_hidden").hide();
					});
					
					
				//生成1000属性的对象
	
				});
				
				
				
				
		function creatTable(divId){
			//表格里显示的数字
			var count = 1;
		
			 //生成table元素
			var table=$("<table border=\"1\">");
			table.appendTo($("#"+divId));
			
				for(var i=0 ; i<10 ;i++){
					//循环生成tr元素
					var tr = $("<tr></tr>");
					 tr.appendTo(table);
					 for(var j=0 ;j<10 ;j++){
						 //循环生成td元素
						 var td=$("<td>"+count+"</td>")
						 	 .css({"background":"white","border":"1px"})
							 //点击函数
							 .click(function(){
								var thisTd = $(this);
								var backGround =thisTd.css("background-color");
								//判断改变颜色
								if(backGround=="rgb(255, 0, 0)"){									
									thisTd.css("background","white");
									}else{
										thisTd.css("background","red");
										};
								//改变其中的数字
									var number= parseInt(thisTd.text());
									thisTd.text((number+1));
								 })
								 
							 .appendTo(tr);						
						  	 count++;
					}
				}	
				
			$("#"+divId).append("</table>");
			table.css({"background-color":"blue"});
			}
		
		//表格里显示的数字
		var count_public = 101;
			
		function addRow(divId){
			
			//获得div下的table
			var table=$("div[id='"+divId+"'] table");
			//创建tr
			var tr = $("<tr></tr>");
					 tr.appendTo(table);
					 //创建td
					 for(var j=0 ;j<10 ;j++){
						 //循环生成td元素
						 var td=$("<td>"+count_public+"</td>")
						  .css({"background":"white","border":"1px"})
						  //点击函数
							 .click(function(){
								 
								var thisTd = $(this); 
								var backGround = thisTd.css("background-color");
								//判断改变颜色
								if(backGround=="rgb(255, 0, 0)"){									
									thisTd.css("background","white");
									}else{
										thisTd.css("background","red");
										};
								//改变其中的数字
									var number= parseInt(thisTd.text());
									thisTd.text((number+1));
								 })
								 
							 .appendTo(tr);						
						  	 count_public++;

			}
		}
		
		
		function creatTable_candelete(divId){
			//表格里显示的数字
			var count = 1;
		
			 //生成table元素
			var table=$("<table border=\"1\">");
			table.appendTo($("#"+divId));
			
				for(var i=0 ; i<10 ;i++){
					//循环生成tr元素
					var tr = $("<tr></tr>");
					 tr.appendTo(table);
					 for(var j=0 ;j<10 ;j++){
						 //循环生成td元素
						 var td=$("<td>"+count+"</td>")
						 	 .css({"background":"white","border":"1px"})
							 //点击函数
							 .click(function(){
								var thisTd = $(this);
								var backGround = thisTd.css("background-color");
								//判断改变颜色
								if(backGround=="rgb(255, 0, 0)"){									
									thisTd.css("background","white");
									}else{
										thisTd.css("background","red");
										};
								//改变其中的数字
									var number= parseInt(thisTd.text());
									thisTd.text((number+1));
								 })
								 
							 .appendTo(tr);			
						  	 count++;
					}
						//创建带有删除按钮的td
							var td_delete=$("<td></td>");
						//创建删除的input
							var input=$("<input  type='button' value='删除本行' />")
								.css({"background":"white","border":"1px"})
								.click(function(){
								 	$(this).parent().parent().empty();
									 })
							 	.appendTo(td_delete);
						
							td_delete.appendTo(tr);			
				}	
				
			$("#"+divId).append("</table>");
			table.css({"background-color":"blue"});
			}
		
		var count_public_delete = 101;
		
		function addRow_candelete(divId){
			
			//获得div下的table
			var table=$("div[id='"+divId+"'] table");
			//创建tr
			var tr = $("<tr></tr>");
					 tr.appendTo(table);
					 //创建td
					 for(var j=0 ;j<10 ;j++){
						 //循环生成td元素
						 var td=$("<td>"+count_public_delete+"</td>")
						  .css({"background":"white","border":"1px"})
						  //点击函数
							 .click(function(){
								var thisTd = $(this);
								var backGround = thisTd.css("background-color");
								//判断改变颜色
								if(backGround=="rgb(255, 0, 0)"){									
									thisTd.css("background","white");
									}else{
										thisTd.css("background","red");
										};
								//改变其中的数字
									var number= parseInt(thisTd.text());
									thisTd.text((number+1));
								 })
								 
							 .appendTo(tr);						
						  	 count_public_delete++;

			}
						//创建带有删除按钮的td
							var td_delete=$("<td></td>");
						//创建删除的input
							var input=$("<input  type='button' value='删除本行' />")
								.css({"background":"white","border":"1px"})
								.click(function(){
								 	$(this).parent().parent().empty();
									 })
							 	.appendTo(td_delete);
						
							td_delete.appendTo(tr);		
			}
			
			function showTime(){
				
				//得到date对象
				var myDate = new Date();
				//拼接时间
				var timeNow = myDate.getHours()+":"+myDate.getMinutes()+":"+myDate.getSeconds();
				
				var timeDiv = $("#time");
				
				timeDiv.text(timeNow);
			}
			
			
				
			function creatRandomInput(divId){
				for(var i=0 ;i<10 ; i++){
					//随机生成10个input
					var randomInput = $("<input  type='text' value='"+(Math.random()*(1000-100+1) + 100)+"'/>")
						.appendTo($("#"+divId));
					}
				}
				
			function checkForm(){
				
				//得到用户名
				var account=$.trim($("#userName").val());
				//验证用户名是否为空
				if(account.length==0||account==null){
					alert("用户名不能为空，请填写用户名");
					$("#userName").focus();
					return false;
					}
				//得到密码
				var	password=$.trim($("#password").val());
				//验证密码是否为空
				if(password.length==0||password==null){
					alert("密码不能为空，请填写密码");
					$("#password").focus();
					return false;
					}
				//得到年龄
				var	age=$.trim($("#age").val());
				//验证年龄是否为空和必须为数字
				if(age.length==0||age==null){
					alert("年龄不能为空，请填写年龄");
					$("#password").focus();
					return false;
					}else{
						if(isNaN(age)){
							alert("年龄必须为数字");
							$("#age").focus();
							return false;
							}else{
								alert("年龄不能为空，请填写年龄");
								}
						}
				}
			//单击隐藏DIV
			function hiddenButton(divId){
				$("#"+divId).hide();					
			}
			//单击显示DIV
			function showButton(divId){
				$("#"+divId).show();
				}
			
			//生成全选表格
			function creatTable_selectAll(divId){
				
				 //生成table元素
				var table=$("<table border=\"1\">");
				table.appendTo($("#"+divId));
				
				var td=$("<td></td>");
				td.appendTo(table);
				//生成带有单击全选的tr
				var tr=$("<tr></tr>");
				tr.text("单击全选");
				var checkBox=$("<input type='checkbox' name='checkAll' />");
					
					checkBox.on("click",function(){
						//将所有的节点的checked属性与第一个checkBox设置一样，实现全选
						if(this.checked){   
        						$(":checkbox").attr('checked', true)  
   						 }else{   
       						    $(":checkbox").attr('checked', false)  
  						  }   
						
					})
					.appendTo(tr);
							 
				tr.appendTo(td);
				//生成其他普通的tr
				for(var i=0;i<9;i++){
					
					var tr=$("<tr></tr>");
					tr.text("卖萌 =￣ω￣=");
					var checkBox=$("<input type='checkbox' name='checkAll' />").appendTo(tr);
					tr.appendTo(td);
					
					}
				$("#"+divId).append("</table>");
				}
    </script>
</head>

<body>
	<input  type="button" value="生成表格" onclick="creatTable('oneProblem')"/>
	<div id="oneProblem"></div>
    
    <br/>------------------------------------------------------------------------------------------------------------------------------------<br/>
    
    <input  type="button" value="生成表格" onclick="creatTable('twoProblem')"/>
     &nbsp; &nbsp; &nbsp; &nbsp;
    <input  type="button" value="再生成一行" onclick="addRow('twoProblem')"/>
    <div id="twoProblem"></div>
    
    <br/>------------------------------------------------------------------------------------------------------------------------------------<br/>
    
    <input  type="button" value="生成表格" onclick="creatTable_candelete('threeProblem')"/>
     &nbsp; &nbsp; &nbsp; &nbsp;
    <input  type="button" value="再生成一行" onclick="addRow_candelete('threeProblem')"/>
    <div id="threeProblem"></div>
    
    <br/>------------------------------------------------------------------------------------------------------------------------------------<br/>
    
    <div id="time"></div>    
    
    <br/>------------------------------------------------------------------------------------------------------------------------------------<br/>
    
     <input  type="button" value="随机生成10个input" onclick="creatRandomInput('fourProblem')"/>
     <div id="fourProblem"></div>
     
     <br/>------------------------------------------------------------------------------------------------------------------------------------<br/>
     
     <form onsubmit="return checkForm()">
     	<label for="userName">用户名 : </label> <input id="userName" name="userName" type="text"/>
        <br/><br/>
        <label for="password">密&nbsp;&nbsp;码 ：</label><input id="password" name="password" type="password"/>
        <br/><br/>
        <label for="age">年&nbsp;&nbsp;龄 : </label><input id="age" name="age" type="text"/>
        <br/><br/>
        <input  type="submit" value="登录"/>
     </form>
     
      <br/>------------------------------------------------------------------------------------------------------------------------------------<br/>
      
      <img src="../../resoure/images/image_jsProblem.jpg"  id="image_Problem" / >
      
      <br/>------------------------------------------------------------------------------------------------------------------------------------<br/>
      
      <label for="focusoutProblem">失去焦点判定是否为数字</label><input  type="text" id="focusoutProblem" name="focusoutProblem"/>
      
       <br/>------------------------------------------------------------------------------------------------------------------------------------<br/>
       
       <div id="change_bg" style="width:100px; height:100px;" ></div>
       
       <br/>------------------------------------------------------------------------------------------------------------------------------------<br/>
       
       <div id="click_hidden" style="width:100px; height:100px; background-color:#3CF" >这里是要隐藏的DIV</div>
       <br/><br/>
       <input type="button"  id="hiddenButton" value="隐藏DIV" onclick="hiddenButton('click_hidden')"/>
       &nbsp;&nbsp;&nbsp;
       <input type="button" id="showButton" value="显示DIV" onclick="showButton('click_hidden')"/>
       
        <br/>------------------------------------------------------------------------------------------------------------------------------------<br/>
        
        <div id="selectAll"></div>
        <input type="button" value="创建表格" onclick="creatTable_selectAll('selectAll')"/>
        
        <br/>------------------------------------------------------------------------------------------------------------------------------------<br/>
        
        <div id="attrDiv"></div>
</body>
</html>
